<template>
    <div class="order-wrap">
        <h3>您的产品</h3>
        <div class="order-list-choose">
            <div class="order-list-option">
                选择产品：
                <select class="selPro" @change="selVal">
                    <option v-for="item in products" :val="item.val" :key="item" :value="JSON.stringify(item)">
                        {{ item.label }}
                    </option>
                </select>
            </div>
            <div class="order-list-option">
                开始日期：
                <my-datepicker @on-change="getStartDate"></my-datepicker>
            </div>
            <div class="order-list-option">
                结束日期：
                <my-datepicker @on-change="getEndDate"></my-datepicker>
            </div>
    
            <div class="order-list-option">
                关键词：
                <input type="text" v-model.lazy="query" class="order-query">
            </div>
        </div>
        <div class="order-list-table">
            <table>
                <tr>
                    <th v-for="head in tableHeads" @click="changeOrderType(head)" :class="{active : head.active}" :key="head">{{ head.label }}</th>
                </tr>
                <tr v-for="item in tableData" :key="item.period">
                    <td v-for="head in tableHeads" :key="head">{{ item[head.key] }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import Selection from '../components/base/selection'
import myDatepicker from '../components/base/datepicker'

export default {
    data() {
        return {
            query: '',
            productId: 0,
            startDate: '',
            endDate: '',
            products: [
                {
                    label: '数据统计',
                    value: 0
                },
                {
                    label: '数据预测',
                    value: 1
                },
                {
                    label: '流量分析',
                    value: 2
                },
                {
                    label: '广告发布',
                    value: 3
                }
            ],
            tableHeads: [
                {
                    active: false,
                    label: '订单号',
                    key: 'orderId'
                },
                {
                    active: false,
                    label: '购买产品',
                    key: 'product'
                },
                {
                    active: false,
                    label: '版本类型',
                    key: 'version'
                },
                {
                    active: false,
                    label: '有效时间',
                    key: 'period'
                },
                {
                    active: false,
                    label: '购买日期',
                    key: 'date'
                },
                {
                    active: false,
                    label: '数量',
                    key: 'buyNum'
                },
                {
                    active: false,
                    label: '总价',
                    key: 'amount'
                }
            ],
            currentOrder: 'asc',
            tableData: []
        }
    },
    methods: {
        productChange(obj) {
            this.productId = obj.value
            this.getList()
        },
        getStartDate(date) {
            this.startDate = date
            this.getList()
        },
        getEndDate(date) {
            this.endDate = date
            this.getList()
        },
        getList() {
            let reqParams = {
                query: this.query,
                productId: this.productId,
                startDate: this.startDate,
                endDate: this.endDate
            }
            this.$http.get('/api/getOrderList', reqParams).then((res) => {
                this.tableData = res.body.data.list
            }, (err) => {

            });
        },
        selVal (ele) {
            this.productId = JSON.parse(ele.target.value).value
        },
        changeOrderType (headItem) {
            this.tableHeads.map((item) => {
                item.active = false
                return item
            })
            headItem.active = true
        }
    },
    mounted () {
        this.productId = 0
        this.getList()
    },
    components: {
        Selection,
        myDatepicker
    }
}
</script>

<style scoped>
.order-wrap {
    width: 1200px;
    min-height: 800px;
    margin: 20px auto;
    overflow: hidden;
}

.order-wrap h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.order-query {
    height: 25px;
    line-height: 25px;
    border: 1px solid #e3e3e3;
    outline: none;
    text-indent: 10px;
}

.order-list-option {
    display: inline-block;
    padding-left: 15px;
}

.order-list-option:first-child {
    padding-left: 0;
}

.order-list-table {
    margin-top: 20px;
}

.order-list-table table {
    width: 100%;
    background: #fff;
}

.order-list-table td,
.order-list-table th {
    border: 1px solid #e3e3e3;
    text-align: center;
    padding: 10px 0;
}

.order-list-table th {
    background: #4fc08d;
    color: #fff;
    border: 1px solid #4fc08d;
    cursor: pointer;
}

.order-list-table th.active {
    background: #35495e;
}

.selPro {
    display: inline-block;
    width: 80px;
    height: 30px;
    outline: none;
    border: 1px solid #ccc;
}
</style>
